```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商系统 - 前端展示与后端管理解决方案</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .section-title {
            position: relative;
            display: inline-block;
        }
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 3px;
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-bottom: 1rem;
        }
        .tech-stack-item {
            transition: all 0.3s ease;
        }
        .tech-stack-item:hover {
            transform: scale(1.05);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4rem;
            line-height: 0.8;
            margin: 0.2em 0.2em 0 0;
            color: #667eea;
            font-weight: 700;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 tracking-tight">电商系统全栈解决方案</h1>
            <p class="text-xl md:text-2xl font-light max-w-3xl mx-auto mb-10 opacity-90">现代化前后端分离架构，打造流畅的用户体验与高效的管理后台</p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#frontend" class="bg-white text-indigo-700 hover:bg-gray-100 font-medium py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105 shadow-md">
                    <i class="fas fa-desktop mr-2"></i>前端展示
                </a>
                <a href="#backend" class="bg-indigo-800 hover:bg-indigo-900 text-white font-medium py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105 shadow-md">
                    <i class="fas fa-server mr-2"></i>后端管理
                </a>
            </div>
        </div>
    </section>

    <!-- Introduction -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="bg-white rounded-xl shadow-lg p-8 md:p-12">
                <p class="text-lg md:text-xl text-gray-700 drop-cap leading-relaxed">
                    本电商系统采用经典J2EE架构，实现了一个完整的电子商务平台。系统包含用户友好的前端展示界面和功能完善的后台管理系统，涵盖了用户注册登录、商品展示、购物车管理、订单支付等核心功能，以及用户管理、商品管理、分类管理等后台管理功能。
                </p>
                <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-100">
                        <div class="feature-icon bg-indigo-100 text-indigo-600 mx-auto">
                            <i class="fas fa-shopping-cart text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-center mb-2">完整电商流程</h3>
                        <p class="text-gray-600 text-center">从商品展示到订单支付，完整覆盖电商核心流程</p>
                    </div>
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-100">
                        <div class="feature-icon bg-purple-100 text-purple-600 mx-auto">
                            <i class="fas fa-cogs text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-center mb-2">强大后台管理</h3>
                        <p class="text-gray-600 text-center">完善的后台管理系统，轻松管理用户、商品和分类</p>
                    </div>
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-100">
                        <div class="feature-icon bg-blue-100 text-blue-600 mx-auto">
                            <i class="fas fa-code text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-center mb-2">成熟技术栈</h3>
                        <p class="text-gray-600 text-center">基于JSP+Servlet+MySQL等成熟技术，稳定可靠</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Frontend Section -->
    <section id="frontend" class="py-16 bg-gray-50 px-4">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold text-center mb-16 section-title">前端展示功能</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 注册 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459402414-6f710300-6faf-4498-bad0-d211e7246a10.png" alt="注册页面" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 mr-3">
                                <i class="fas fa-user-plus"></i>
                            </span>
                            <h3 class="text-xl font-bold">1.1 用户注册</h3>
                        </div>
                        <p class="text-gray-600">提供简洁直观的用户注册界面，包含必要的信息收集字段和表单验证功能。</p>
                    </div>
                </div>
                
                <!-- 登录 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459402825-fbeae90b-e8a7-49ce-81ba-5fc105c6a411.png" alt="登录页面" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-green-100 text-green-600 mr-3">
                                <i class="fas fa-sign-in-alt"></i>
                            </span>
                            <h3 class="text-xl font-bold">1.2 用户登录</h3>
                        </div>
                        <p class="text-gray-600">用户登录界面设计简洁，提供记住密码和错误提示功能，确保良好的用户体验。</p>
                    </div>
                </div>
                
                <!-- 商品类别展示 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459404069-d8829e48-e23c-4aa8-bff0-60696656446f.png" alt="商品类别展示" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-yellow-100 text-yellow-600 mr-3">
                                <i class="fas fa-list"></i>
                            </span>
                            <h3 class="text-xl font-bold">1.4 商品类别展示</h3>
                        </div>
                        <p class="text-gray-600">清晰的商品分类展示，便于用户快速找到所需商品类别，提高浏览效率。</p>
                    </div>
                </div>
                
                <!-- 单个商品展示 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459404596-7206d8ed-36e0-4764-9c3c-c298c9ab12ce.png" alt="单个商品展示" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-red-100 text-red-600 mr-3">
                                <i class="fas fa-box-open"></i>
                            </span>
                            <h3 class="text-xl font-bold">1.5 单个商品展示</h3>
                        </div>
                        <p class="text-gray-600">详细的商品信息页面，包含图片展示、价格、库存和购买按钮，促进用户购买决策。</p>
                    </div>
                </div>
                
                <!-- 购物车 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459405122-c0057560-36ea-40fb-8061-969917b9121b.png" alt="购物车" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 text-blue-600 mr-3">
                                <i class="fas fa-shopping-cart"></i>
                            </span>
                            <h3 class="text-xl font-bold">1.6 购物车管理</h3>
                        </div>
                        <p class="text-gray-600">直观的购物车界面，支持商品数量修改、删除和结算功能，简化购物流程。</p>
                    </div>
                </div>
                
                <!-- 付款 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459405631-c114121a-1dd4-465a-a133-f192adb9ba46.png" alt="付款页面" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-purple-100 text-purple-600 mr-3">
                                <i class="fas fa-credit-card"></i>
                            </span>
                            <h3 class="text-xl font-bold">1.7 支付流程</h3>
                        </div>
                        <p class="text-gray-600">安全的支付界面设计，引导用户完成订单支付过程，提供支付确认信息。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Backend Section -->
    <section id="backend" class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold text-center mb-16 section-title">后台管理系统</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 用户管理 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459406101-d3af4329-da09-412e-badd-e5cc552a3b8f.png" alt="用户管理" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 mr-3">
                                <i class="fas fa-users"></i>
                            </span>
                            <h3 class="text-xl font-bold">2.1 用户管理</h3>
                        </div>
                        <p class="text-gray-600 mb-3">后台用户管理界面，支持用户信息的查看、搜索和删除操作。</p>
                        <div class="mt-4 pt-4 border-t border-gray-100">
                            <h4 class="font-medium text-gray-700 mb-2">编辑功能：</h4>
                            <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459406325-0d81d71d-32ef-4345-9ae6-bb75616cf95a.png" alt="用户编辑" class="w-full rounded">
                        </div>
                    </div>
                </div>
                
                <!-- 商品管理 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459406648-919bbeae-307b-42e7-a524-896f30127a30.png" alt="商品管理" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-green-100 text-green-600 mr-3">
                                <i class="fas fa-boxes"></i>
                            </span>
                            <h3 class="text-xl font-bold">2.2 商品管理</h3>
                        </div>
                        <p class="text-gray-600 mb-3">全面的商品管理界面，支持商品的增删改查操作。</p>
                        <div class="mt-4 pt-4 border-t border-gray-100">
                            <h4 class="font-medium text-gray-700 mb-2">编辑功能：</h4>
                            <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459407144-b1379289-589c-44c7-a5e1-fe965a42bf43.png" alt="商品编辑" class="w-full rounded">
                        </div>
                    </div>
                </div>
                
                <!-- 商品类别管理 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459407654-54e781a2-b8e8-4d5f-a96d-fffc1eaf4e5d.png" alt="商品类别管理" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center mb-3">
                            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-yellow-100 text-yellow-600 mr-3">
                                <i class="fas fa-tags"></i>
                            </span>
                            <h3 class="text-xl font-bold">2.3 商品类别管理</h3>
                        </div>
                        <p class="text-gray-600 mb-3">商品分类管理界面，支持分类的创建、修改和删除。</p>
                        <div class="mt-4 pt-4 border-t border-gray-100">
                            <h4 class="font-medium text-gray-700 mb-2">编辑功能：</h4>
                            <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651459407906-9dd94fe8-d9d1-4082-943a-d01c58972e70.png" alt="分类编辑" class="w-full rounded">
                        </div>
                    </div>
                </div>
                
                <!-- 技术架构 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
                    <div class="flex items-center mb-6">
                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 text-blue-600 mr-3">
                            <i class="fas fa-layer-group"></i>
                        </span>
                        <h3 class="text-xl font-bold">技术架构</h3>
                    </div>
                    
                    <div class="mermaid">
                        graph TD
                            A[前端] -->|AJAX请求| B[JSP/Servlet]
                            B --> C[JDBC]
                            C --> D[MySQL数据库]
                            D --> C
                            C --> B
                            B --> A
                    </div>
                    
                    <div class="mt-6 grid grid-cols-2 gap-4">
                        <div class="tech-stack-item bg-gray-50 p-4 rounded-lg border border-gray-200 flex items-center">
                            <i class="fab fa-java text-3xl text-red-500 mr-3"></i>
                            <div>
                                <h4 class="font-bold">JSP/Servlet</h4>
                                <p class="text-sm text-gray-600">服务器端技术</p>
                            </div>
                        </div>
                        <div class="tech-stack-item bg-gray-50 p-4 rounded-lg border border-gray-200 flex items-center">
                            <i class="fas fa-database text-3xl text-blue-500 mr-3"></i>
                            <div>
                                <h4 class="font-bold">MySQL</h4>
                                <p class="text-sm text-gray-600">关系型数据库</p>
                            </div>
                        </div>
                        <div class="tech-stack-item bg-gray-50 p-4 rounded-lg border border-gray-200 flex items-center">
                            <i class="fab fa-js-square text-3xl text-yellow-500 mr-3"></i>
                            <div>
                                <h4 class="font-bold">jQuery/Ajax</h4>
                                <p class="text-sm text-gray-600">前端交互</p>
                            </div>
                        </div>
                        <div class="tech-stack-item bg-gray-50 p-4 rounded-lg border border-gray-200 flex items-center">
                            <i class="fas fa-plug text-3xl text-green-500 mr-3"></i>
                            <div>
                                <h4 class="font-bold">JDBC</h4>
                                <p class="text-sm text-gray-600">数据库连接</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-6 bg-indigo-50 rounded-lg p-4 border border-indigo-100">
                        <h4 class="font-bold text-indigo-700 mb-2 flex items-center">
                            <i class="fas fa-download mr-2"></i> 获取源代码
                        </h4>
                        <p class="text-sm text-gray-700 mb-2">链接: <a href="https://pan.baidu.com/s/1V3jYLklqKUzSzdjU9v9xQw" class="text-indigo-600 hover:underline" target="_blank">https://pan.baidu.com/s/1V3jYLklqKUzSzdjU9v9xQw</a></p>
                        <p class="text-sm text-gray-700">提取码: 11n3</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-1">技术小馆</h3>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-400 hover:text-white transition duration-300" target="_blank">http://www.yuque.com/jtostring</a>
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-indigo-600 transition duration-300">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-blue-500 transition duration-300">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white hover:bg-red-500 transition duration-300">
                        <i class="fab fa-youtube"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-6 pt-6 text-sm text-gray-500 text-center">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```